<template>
	<u-popup v-model="vuex_phone" mode="bottom" border-radius="20" @close="cancel">
		<view class="page">
			<view class="avatar-box">
				<u-avatar size="large" :src="vuex_user.avatar"></u-avatar>
			</view>
			<view class="tip-info">手机号认证成功后您可以使用发帖、评论等功能。</view>
			<view class="btn-box">
				<u-button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" shape="circle" type="success">手机号认证</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		props: {
			desc: String,
			title: String,
		},
		data() {
			return {
				login: {
					appId: '',
					encryptedData: '',
					code: '',
					iv: ''
				},
			}
		},
		created() {
			this.init();
	    },
		computed: {
			...mapState(['vuex_user','vuex_phone']),
		},
		methods: {
			init() {
				this.getCode();
			},
			getPhoneNumber(e) {
				this.getCode();
				if(e.detail.errMsg == 'getPhoneNumber:ok'){
					this.login.appId = this.website.appId;
					this.login.encryptedData = e.detail.encryptedData;
					this.login.iv = e.detail.iv;
					this.$u.post('/auth/wx/phone',this.login).then(res => {
						this.$u.toast('手机号认证成功');
						this.$store.commit('setPhone', false);
						this.$emit('ok');
					})
				}
			},
			getCode() {
				const _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						_this.login.code = loginRes.code;
					},
					fail: function() {
						
					}
				});
			},
			cancel() {
				this.$store.commit('setPhone', false);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tip-info {
		font-size: 30rpx;
		display: flex;
		justify-content: center;
		color: #303133;
		margin-bottom: 15px;
	}
	.page {
		padding: 30px 15px;
		padding-bottom: 100px;
	}
	.avatar-box {
		display: flex;
		justify-content: center;
		padding: 15px;
		padding-top: 0;
	}
</style>
